import React from "react";
import { Outlet, NavLink } from "react-router-dom";
import { mainRouts } from "../router/Router_Cfig";
import { Tabbar } from "react-vant";

type Props = {};

const Home = (props: Props) => {
  return (
    <div className="homes">
      <main>
        <Outlet></Outlet>
      </main>
      <footer>
        <Tabbar>
          {mainRouts &&
            mainRouts.map((item, index) => {
              return (
                <Tabbar.Item key={index} icon={item.icon}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </Tabbar.Item>
              );
            })}
        </Tabbar>
      </footer>
    </div>
  );
};

export default Home;
